<template>
    <!--导航nav-->
    <div id="navall">
		<div id="nav">
			<!--产品分类-->
			<div class="proclass" @mouseenter="showOrHide()"
				 @mouseleave="showOrHide()">
				<p>产品分类</p>
				<div class="prolist" :style="{ display : isShow ? 'block':'none'}">
					<!--遍历类型数据的集合-->
					<div class="list" v-for="(type,index) in typeList" :key="index">
						<dl>
							<a
							   @click="toCateGoods(type.id)"
							   target="mainFrame"
							>
								<dt>{{type.name}}</dt>
							</a>
						</dl>
					</div>
				</div>
			</div>

			<!--导航-->
			<ul id="inav">
				<li :class="flag == 0 ? 'active':''">
					<a @click="changeFlag(0)" target="mainFrame">商城首页</a>
				</li>
                <li :class="flag == 2 ? 'active':''">
					<a @click="changeFlag(2)" target="mainFrame">热销排行</a>
				</li>
				<li :class="flag == 1 ? 'active':''">
					<a @click="changeFlag(1)" target="mainFrame">今日推荐</a>
				</li>
				<li :class="flag == 3 ? 'active':''">
					<a @click="changeFlag(3)" target="mainFrame">新品上市</a>
				</li>
			</ul>

		</div>
	</div>
	
</template>

<script>
import { findAllTypes } from '@/request/type'
export default {
    name: 'Nav',
    data() {
        return {
            /*目前用户是否登录*/
            isLogin: true,
            /*当前登录的用户*/
            user: {
                username: null,
                id: null
            },
            /*类型数据列表*/
            typeList: null,
            /*点击类型请求地址*/
            typeUrl: null,
            /*是否显示类型列表*/
            isShow: false,
            flag: 0,
            key: '', //查询关键词
            goodUrl: '',
        };
    },
    created() {
        findAllTypes().then(res=>{
            this.typeList = res.data
        })
    },
    methods: {
        toCateGoods(typeId){
            this.$router.push({path:'/categoods',query:{typeId}})
        },
        changeShowAll(value){
            this.$emit('changeShowAll', value)
        },
        findKey() {
            this.goodUrl = "goods.html?key=" + this.key
        },
        changeFlag(flag) {
            this.flag = flag
            this.changeShowAll(flag?false:false)
            this.$parent.tab = flag
        },
        changeTypeId(id) {
            this.$emit('changeShowAll', false)
        },
        /*类型列表是否显示*/
        showOrHide() {
            this.isShow = !this.isShow;
            this.$parent.tab = 0
        }
    },
};
</script>

<style scoped>
</style>